<template>
  <view class="common-tab-bar fix-bottom-safe" v-show="hideshow">
    <view class="common-tab-bar-content flex">
      <!-- 宽度内容撑开区域 -->
      <view class="content-spread-box fbc">
        <slot name="content-spread"></slot>
      </view>
      <!-- 自适应区域 -->
      <view class="self-adaptation-box fbc">
        <slot name="self-adaptation" style="width: 100%;display: flex"></slot>
      </view>
    </view>
  </view>
</template>

<script>
import { debounce } from "@/utils";
export default {
  name: "CommonTabBar",
  props: {
    isWatch:{ // 是否开启监听页面高度的变化
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      // docmWidth: document.documentElement.clientWidth, //默认屏幕宽度
      // docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      // showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hideshow: true, //显示或者隐藏footer
    }
  },
  components: {},
  //监听
  watch: {
    showHeight () {
      if(!this.isWatch) return
      if (this.docmHeight > this.showHeight) {
        this.hideshow = false
      } else {
        this.hideshow = true
      }
    },
  },
  created() {
    // window.onresize监听页面高度的变化
    // window.onresize = debounce(this.resize, 200)
  },
  methods: {
    // resize() {
    //   const newWidth = document.body.clientWidth
    //   const newHeight = document.body.clientHeight
    //   // 宽度变化基本是因为手机改变横屏或者竖屏了，要重新设置默认屏幕高度跟宽度
    //   if(newWidth != this.docmWidth) {
    //     this.docmWidth = newWidth
    //     this.docmHeight = newHeight
    //   }
    //   this.showHeight = newHeight
    //   console.log('屏幕变化或者输入聚焦：', this.docmWidth ,  this.docmHeight ,this.showHeight )
    // }
  },
}
</script>

<style lang="scss" scoped>
.common-tab-bar {
  // 输入的时候高度变小，大于宽高比13/20则说明弹起输入框，要隐藏底部按钮
  // @media (min-aspect-ratio: 13/20) {
  //   display: none;
  // }
  z-index: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background: #fff;
  .common-tab-bar-content {
    width: 100%;
    padding: 9rpx 24rpx;
    height: 96rpx;
  }
  .content-spread-box {
    flex: none;
    ::v-deep > * {
      margin-right: 10rpx;
      height: 100%;
      &:last-child {
        // 设置离右边自适应区域间距
        margin-right: 16rpx;
      }
    }
  }
  .self-adaptation-box {
    flex: 1;
    ::v-deep > * {
      flex: 1;
      height: 100%;
      margin-right: 20rpx;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}
</style>
